<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Container | Semantic UI</title>

<meta name="description" content="A container limits content to a maximum width" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="basic minimal" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="active item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Container
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="active item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        <script src="/javascript/container.js"></script>
<link rel="stylesheet/less" type="text/css" href="/src/definitions/elements/container.less" />



<div class="ui masthead vertical tab segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Container
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          A container limits content to a maximum width
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/elements/container.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Container] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Container should do this%0A%0A**Result**%0AThe Container does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Container</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Container/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Container/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-container">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-container">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Container.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
    
    
    
    
      
        
      
        
      
        
      
      <div class="ui three item stackable tabs menu">
        
          <a class="active item" data-tab="introduction">Introduction</a>
          
        
          <a class="item" data-tab="definition">Definition</a>
          
        
          <a class="item" data-tab="examples">Examples</a>
          
        
      </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<div class="ui active intro tab" data-tab="introduction">

  <div class="ui main container">

    <h2 class="ui dividing header">Introduction</h2>

    <div class="introduction">

      <h3 class="ui header">When To Use</h3>

      <p>A container is an element designed to contain page elements to a reasonable maximum width based on the size of a user's screen. This is useful to couple with other UI elements like <a href="/collections/grid.html">grid</a> or <a href="/collections/menu.html">menu</a> to restrict their width to a reasonable size for display.</p>


      <h3 class="ui header">Container Sizes</h3>

      <p>Containers are designed to responsively adjust their maximum width based on the size of the screen on which they are appearing.</p>

      <table class="ui celled definition table">
        <thead>
          <th class="collapsing"></th>
            <th>Mobile</th>
            <th>Tablet</th>
            <th class="single line">Small Monitor</th>
            <th class="single line">Large Monitor</th>
        </thead>
        <tbody>
          <tr>
            <td>Width</td>
            <td>100%</td>
            <td>
              723px
              <i class="circle help link icon" data-html="Maximum device width with two <code>1em</code> gutters and a <code>17px</code> scrollbar width. <div class='ui divider'></div> <code>768 - (14 * (1 * 2)) - 17</code>">
            </td>
            <td>
              933px
              <i class="circle help link icon" data-html="Maximum device width with two <code>1.5em</code> gutters and a <code>17px</code> scrollbar width. <div class='ui divider'></div> <code>992 - (14 * (1.5 * 2)) - 17</code>">
            </td>
            <td>
              1127px
              <i class="circle help link icon" data-html="Maximum device width with two <code>2em</code> gutters and a <code>17px</code> scrollbar width. <div class='ui divider'></div> <code>1200 - (14 * (2 * 2)) - 17</code>">
            </td>
          </tr>
          <tr>
            <td class="single line">Gutter Size</td>
            <td>1em</td>
            <td>Fluid</td>
            <td>Fluid</td>
            <td>Fluid</td>
          </tr>
          <tr>
            <td>Variable</td>
            <td><code>$largestMobileScreen</code></td>
            <td><code>$mobileBreakpoint</code></td>
            <td><code>$smallMonitorBreakpoint</code></td>
            <td><code>$largeMonitorBreakpoint</code></td>
          </tr>
          <tr>
            <td>Device Width</td>
            <td>below 768px</td>
            <td>768px - 991px</td>
            <td>992px - 1200px</td>
            <td>above 1200px</td>
          </tr>
        </tbody>
      </table>
      <h3 class="ui header">Responsive Visibility</h3>
      <p>Since variations in Semantic UI are only assigned in the scope of components, there are no "free floating" responsive class names, however some components include responsive variations to help ease responsive design. <a href="/collections/grid.html#device-visibility">Grid</a> for example, includes responsive classes for hiding or showing <code>column</code>, <code>row</code> based on device type.</p>

      <a href="/collections/grid.html#device-visibility" class="ui secondary button">See grid responsive variations <i class="right chevron icon"></i></a>

      <h3 class="ui header">Determining Maximum Widths</h3>

      <p>Containers appear at the same width at each device size. This size is calculated programmatically by determining the maximum device width available within a device breakpoint, given a desired minimum gutter size.</p>

      <p>For example to determine tablet container size the following formula is used:</p>

      <div class="code" data-type="less">
      /* In site.variables */
      @tabletBreakpoint : 768px;
      @scrollbarWidth : 17px; /* This is a constant */

      /* In container.variables */
      @tabletMinimumGutter : (@emSize  * 1); /* require 1em gutter */
      @tabletWidth : @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
      </div>

      <p>This is the same as <code>768px - (14px * 2) - 17px</code> or <code>723px</code></p>

      <p>Adjusting site breakpoints in <code>site.variables</code> to use custom values will automatically adjust container widths.</p>


    </div>
  </div>
</div>


<div class="ui tab" data-tab="definition">

  <div class="ui main container">

    <h2 class="ui dividing header">Types</h2>

    <div class="no example">
      <h4 class="ui header">Container</h4>
      <p>A standard container</p>
    </div>

    <div class="ui ignored code">
      <div class="ui container">
        <p></p>
      </div>
    </div>

  </div>

  <div class="ui container">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa
    <strong>strong</strong>. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus
    mus. Donec quam felis, ultricies nec, pellentesque
    eu, pretium quis, sem. Nulla consequat massa quis
    enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut,
    imperdiet a, venenatis vitae, justo. Nullam dictum
    felis eu pede <a href="#">link</a>
    mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate
    eleifend tellus. Aenean leo ligula, porttitor eu,
    consequat vitae, eleifend ac, enim. Aliquam lorem ante,
    dapibus in, viverra quis, feugiat a, tellus. Phasellus
    viverra nulla ut metus varius laoreet. Quisque rutrum.
    Aenean imperdiet. Etiam ultricies nisi vel augue.
    Curabitur ullamcorper ultricies nisi.</p>
  </div>

  <div class="ui main container">

    <div class="no example">
      <h4 class="ui header">Text Container</h4>
      <p>A container can reduce its maximum width to more naturally accomodate a single column of text</p>
      <div class="ui info message">
        A text container is a simpler markup alternative to using a grid with a single column, and is designed to have a reasonable maximum width for displaying flowing text
      </div>
    </div>

    <div class="ui ignored code">
      <div class="ui text container">
      </div>
    </div>
  </div>

  <div class="ui text container">
    <h2 class="ui header">Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa
    <strong>strong</strong>. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus
    mus. Donec quam felis, ultricies nec, pellentesque
    eu, pretium quis, sem. Nulla consequat massa quis
    enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut,
    imperdiet a, venenatis vitae, justo. Nullam dictum
    felis eu pede <a href="#">link</a>
    mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate
    eleifend tellus. Aenean leo ligula, porttitor eu,
    consequat vitae, eleifend ac, enim. Aliquam lorem ante,
    dapibus in, viverra quis, feugiat a, tellus. Phasellus
    viverra nulla ut metus varius laoreet. Quisque rutrum.
    Aenean imperdiet. Etiam ultricies nisi vel augue.
    Curabitur ullamcorper ultricies nisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa
    <strong>strong</strong>. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus
    mus. Donec quam felis, ultricies nec, pellentesque
    eu, pretium quis, sem. Nulla consequat massa quis
    enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut,
    imperdiet a, venenatis vitae, justo. Nullam dictum
    felis eu pede <a href="#">link</a>
    mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate
    eleifend tellus. Aenean leo ligula, porttitor eu,
    consequat vitae, eleifend ac, enim. Aliquam lorem ante,
    dapibus in, viverra quis, feugiat a, tellus. Phasellus
    viverra nulla ut metus varius laoreet. Quisque rutrum.
    Aenean imperdiet. Etiam ultricies nisi vel augue.
    Curabitur ullamcorper ultricies nisi.</p>
  </div>

  <div class="ui main container">


    <h2 class="ui dividing header">Variations</h2>

    <div class="no example">
      <h4 class="ui header">Text Alignment</h4>
      <p>A container can specify its text alignment</p>

    </div>

    <div class="ui ignored code">
      <div class="ui left aligned container">
        <p></p>
      </div>
      <div class="ui center aligned container">
        <p></p>
      </div>
      <div class="ui right aligned container">
        <p></p>
      </div>
      <div class="ui justified container">
        <p></p>
      </div>
    </div>

    <div class="ui left aligned container">
      Left Aligned
    </div>
    <div class="ui center aligned container">
      Center Aligned
    </div>
    <div class="ui right aligned container">
      Right Aligned
    </div>
    <div class="ui justified container">
      <b>Justified</b>
      <div class="ui divider"></div>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Aenean commodo ligula eget dolor. Aenean massa
      <strong>strong</strong>. Cum sociis natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus
      mus. Donec quam felis, ultricies nec, pellentesque
      eu, pretium quis, sem. Nulla consequat massa quis
      enim. Donec pede justo, fringilla vel, aliquet nec,
      vulputate eget, arcu. In enim justo, rhoncus ut,
      imperdiet a, venenatis vitae, justo. Nullam dictum
      felis eu pede <a href="#">link</a>
      mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate
      eleifend tellus. Aenean leo ligula, porttitor eu,
      consequat vitae, eleifend ac, enim. Aliquam lorem ante,
      dapibus in, viverra quis, feugiat a, tellus. Phasellus
      viverra nulla ut metus varius laoreet. Quisque rutrum.
      Aenean imperdiet. Etiam ultricies nisi vel augue.
      Curabitur ullamcorper ultricies nisi.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Aenean commodo ligula eget dolor. Aenean massa
      <strong>strong</strong>. Cum sociis natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus
      mus. Donec quam felis, ultricies nec, pellentesque
      eu, pretium quis, sem. Nulla consequat massa quis
      enim. Donec pede justo, fringilla vel, aliquet nec,
      vulputate eget, arcu. In enim justo, rhoncus ut,
      imperdiet a, venenatis vitae, justo. Nullam dictum
      felis eu pede <a href="#">link</a>
      mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate
      eleifend tellus. Aenean leo ligula, porttitor eu,
      consequat vitae, eleifend ac, enim. Aliquam lorem ante,
      dapibus in, viverra quis, feugiat a, tellus. Phasellus
      viverra nulla ut metus varius laoreet. Quisque rutrum.
      Aenean imperdiet. Etiam ultricies nisi vel augue.
      Curabitur ullamcorper ultricies nisi.</p>
    </div>

    <div class="no example">
      <h4 class="ui header">Fluid</h4>
      <p>A fluid container has no maximum width</p>
      <div class="ui info message">Fluid containers are useful for setting text alignment, or other variations on unstyled content</div>

      <div class="ui ignored code">
        <div class="ui fluid container">
          Fluid
        </div>
      </div>
    </div>

  </div>

  <div class="ui fluid container">
    <h2 class="ui header">Dogs Roles with Humans</h2>
    <p>Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.</p>
    <p>The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.</p>
  </div>

  <div class="ui main container"></div>

</div>

<div class="ui tab" data-tab="examples">


  <div class="ui main container">

    <h2 class="ui dividing header">Examples</h2>

    <div class="no example">
      <h4 class="ui header">Containers Using Grids</h4>
      <p>A container can be combined with a grid allowing you to use all of the layout and alignment available for <a href="/collections/grid.html#doubling">grids</a> including responsive patterns.</p>
    </div>

    <div class="ui ignored code">
      <div class="ui four column doubling stackable grid container">
        <div class="column">
          <p></p>
          <p></p>
        </div>
        <div class="column">
          <p></p>
          <p></p>
        </div>
        <div class="column">
          <p></p>
          <p></p>
        </div>
        <div class="column">
          <p></p>
          <p></p>
        </div>
      </div>
    </div>
  </div>

  <div class="ui four column doubling stackable grid container">
    <div class="column">
      <img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
      <div class="ui hidden divider"></div>
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
      <div class="ui hidden divider"></div>
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
    </div>
    <div class="column">
      <img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
      <div class="ui hidden divider"></div>
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
      <div class="ui hidden divider"></div>
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
    </div>
    <div class="column">
      <img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
      <div class="ui hidden divider"></div>
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
      <div class="ui hidden divider"></div>
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
    </div>
    <div class="column">
      <img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
      <div class="ui hidden divider"></div>
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
      <div class="ui hidden divider"></div>
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
    </div>
  </div>

  <div class="ui main container">
    <div class="no example">
      <h4 class="ui header">Centered Menu</h4>
      <p>A container can be used inside of a menu to make sure menu items appear inline with page contents. Using responsive variations like <a href="/collections/menu.html#stackable">stackable</a> menu can help make contents adjust to different device sizes.</p>
    </div>

    <div class="ui ignored code">
      <div class="ui attached stackable menu">
        <div class="ui container">
          <a class="item">
            <i class="home icon"></i> Home
          </a>
          <a class="item">
            <i class="grid layout icon"></i> Browse
          </a>
          <a class="item">
            <i class="mail icon"></i> Messages
          </a>
          <div class="ui simple dropdown item">
            More
            <i class="dropdown icon"></i>
            <div class="menu">
              <a class="item"><i class="edit icon"></i> Edit Profile</a>
              <a class="item"><i class="globe icon"></i> Choose Language</a>
              <a class="item"><i class="settings icon"></i> Account Settings</a>
            </div>
          </div>
          <div class="right item">
            <div class="ui input"><input type="text" placeholder="Search..."></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="ui attached stackable menu">
    <div class="ui container">
      <a class="item">
        <i class="home icon"></i> Home
      </a>
      <a class="item">
        <i class="grid layout icon"></i> Browse
      </a>
      <a class="item">
        <i class="mail icon"></i> Messages
      </a>
      <div class="ui simple dropdown item">
        More
        <i class="dropdown icon"></i>
        <div class="menu">
          <a class="item"><i class="edit icon"></i> Edit Profile</a>
          <a class="item"><i class="globe icon"></i> Choose Language</a>
          <a class="item"><i class="settings icon"></i> Account Settings</a>
        </div>
      </div>
      <div class="right item">
        <div class="ui input"><input type="text" placeholder="Search..."></div>
      </div>
    </div>
  </div>

  <div class="ui main container">

    <div class="no example">
      <h4 class="ui header">Container Segment</h4>
      <p>A container can be used with a <a href="/elements/segment.html">segment</a></p>
    </div>

    <div class="ui ignored code">
      <div class="ui raised very padded text container segment">
        <h2 class="ui header">Dogs Roles with Humans</h2>
        <p></p>
        <p></p>
      </div>
    </div>
  </div>

  <div class="ui raised very padded text container segment">
    <h2 class="ui header">Dogs Roles with Humans</h2>
    <p>Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.</p>
    <p>The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.</p>
  </div>


  <div class="main container"></div>
</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
